import React, { useEffect, useState } from 'react';
import '@/pages/index.less';
import '@/pages/System/index.less';
import {
  Form,
  Input,
  Button,
  Space,
  Modal,
  Table,
} from 'antd';
import { connect } from 'dva';

import { Getlogs, PatchmessageRead } from '@/servers/message';

import { history } from 'umi';

const DataWarehouseView = (props: any) => {

  const [total, setTotal] = useState(0); // table总数
  const [pageSize, setpageSize] = useState(10); // table一页数量
  const [pageIndex, setPageIndex] = useState(1); // table页码

  const paginationOption = {
    pageSize: pageSize,
    current: pageIndex,
    total: total,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: any) => `共 ${total} 条`,
  };

  // 分页方法one
  const getRightOnePage = (params: any) => {
    Getlogs({ ...params }).then(res => {
      settableData(
        res?.data?.rows.map((item: any) => ({ ...item, key: item.id })),
      );
      setTotal(res?.data?.total);
    });
  };

  const [tableData, settableData] = useState([]);

  // 整个表格change的回调       其实就是pagination的变动做watch
  const onChangeEveryWatch: any = (
    pagination: any,
    filters: any, // 很少用到
    sorter: any,
    extra: any,
  ) => {
    console.log('分页器3个参数params：', pagination);
    setpageSize(pagination.pageSize);
    setPageIndex(pagination.current);
  };

  const columns: any = [
    {
      title: '操作人',
      dataIndex: 'creatorName',
      render: (text: string, row: any, index: number) => {
        return <span>{text}</span>;
        // return <span onClick={showDetail.bind(null, row)}>{text}</span>
      },
    },
    {
      title: '操作事件',
      dataIndex: 'description',
      align: 'left',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      align: 'left',
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any, index: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              // EditData(record);
            }}
          >
            编辑{' '}
          </a>
          <a
            onClick={() => {
              // DeleteSubscribe(record);
            }}
          >
            删除
          </a>
        </Space>
      ),
    },
  ];

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    // 表格table全选用的
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const [searchStr, setSearchStr] = useState();

  const onSearch = (val: string) => {
    // 非表格触发，
    getRightOnePage({ pageIndex: pageIndex, pageSize, search: val });
  };

  useEffect(() => {
    // 统一入口
    getRightOnePage({ pageIndex: pageIndex, pageSize, search: searchStr }); // 防止进入页面，重复调用接口，使用短路运算符，屏蔽第1次请求
  }, [searchStr, pageSize, pageIndex]); // 统一监听所有的参数，变量watch

  return (
    <div className="pageView">
      <Space>
        <Input.Search
          allowClear
          value={searchStr}
          onChange={e => {
            setSearchStr(e.target.value as any);
          }}
          placeholder="请输入"
          style={{ width: 200 }}
          onSearch={onSearch}
        ></Input.Search>
      </Space>

      <Table
        columns={columns}
        dataSource={tableData}
        pagination={paginationOption}
        onChange={onChangeEveryWatch}
        rowSelection={rowSelection}
      />
    </div>
  );
};
const mapStateToProps = (state: any) => {
  const { open } = state.model_system_dataware;
  return {
    open,
    loading: state.loading.effects['model_system_dataware/reload'],
    loadingSetting: state.loading.effects['model_system_dataware/Open'],
  };
};
export default connect(mapStateToProps)(DataWarehouseView);
